<!-- 
  组合式生命周期钩子

      beforeCreate      无    setup
      created           无    setup
      beforeMount       onBeforeMount
      mounted           onMounted
      beforeUpdate      onBeforeUpdate
      updated           onUpdated
      beforeUnmount     onBeforeUnmount
      unmounted         onUnmounted
      activated         onActivated
      deactivated       onDeactivated

                        onErrorCaptured  用于捕获后代组件中的错误
 -->

<template>
  <div>
    <h1>App</h1>
    <button @click="person.city = { name: '广州' }">
      {{ person.city.name }}
    </button>

    <hr />

    <Hello />
  </div>
</template>

<script>
import Hello from "./Hello.vue";
import {
  isRef,
  ref,
  toValue,
  unref,
  reactive,
  shallowReactive,
  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered,
} from "vue";

export default {
  components: {
    Hello,
  },
  setup() {
    const count = ref(10);
    const name = "张三";
    console.log(isRef(count)); // true

    console.log(unref(count)); // 10
    console.log(unref(name)); // '张三'

    /**
     * toValue Vue3.3+
     * 与 unref 类似，但是多一个 getter 函数的支持
     * unref = (val) => isRef(val) ? val.value : val
     * function toValue(val) {
     *    if (typeof val === 'function') {
     *      return val()
     *    }
     *
     *    return isRef(val) ? val.value : val
     * }
     */
    console.log(toValue(count)); // 10
    console.log(toValue(name)); // '张三'
    console.log(toValue(() => "里斯")); // '里斯'

    const raw = {
      name: "张三",
      age: 18,
      city: {
        name: "深圳",
      },
    };

    const person = shallowReactive(raw);

    onErrorCaptured((...rest) => {
      console.log("后代有错误", rest);
      // 主要可以用于实现错误上报，将一些运行时产生的错误给收集起来，方便后续分析
    });

    onRenderTracked((e) => {
      console.log("收集", e);
    });

    onRenderTriggered((e) => {
      console.log("触发", e);
    });

    return {
      person,
    };
  },
};
</script>
